<template>
      <div class="sharp" @mousedown='handleMouseDown' >
        <slot></slot>
      </div>
</template>

<script setup>
const props = defineProps({
  originalStyle:Object
})

const emit = defineEmits(['myClick'])
const myClick=()=>{
  emit('myClick',888)
}

console.log(props.originalStyle)

const throttle = (fn,delay = 50)=>{
    let timer = null
    return (...args)=>{
      if(timer) return 
      timer = setTimeout(()=>{
        clearTimeout(timer)
        timer = null

        fn(...args)
      },delay)
    }
  }

  const handleMouseDown=e=>{
    console.log(e)
    e.stopPropagation();
    e.preventDefault();

    const startX = e.clientX
    const startY = e.clientY

    const originalPos = props.originalStyle


    const startTop = Number(originalPos.top)
    const startLeft = Number(originalPos.left)

    const move = throttle(me =>{
         const curX = me.clientX
         const curY = me.clientY

         originalPos.top = curY-startY+startTop
         originalPos.left = curX-startX+startLeft
    })

    const up = ()=>{
      document.removeEventListener('mousemove',move)
      document.removeEventListener('mouseup',up)
    }
    //document.getElementsByClassName('sharp')[0].
    document.addEventListener('mousemove',move)
    document.addEventListener('mouseup',up)
  }


</script>

<style lang="scss" scoped>
  .sharp{
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: red;
      &:hover{
          cursor:move;
      }
  }
</style>